<template>
  <div>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
        <button @click="searchUsers">Search</button>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:'Search',
  data () {
    return {
      keyWord:''
    }
  },
  methods: {
    searchUsers(){
      // 发送请求前修改状态
      this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        response =>{
          //console.log('成功了，',response.data.items)
          // this.$bus.$emit('getUsers',response.data.items)
          // 请求成功后修改状态
          this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
        },
        error => {
          // console.log('失败了，',error.message)
          // 请求失败后修改状态
          this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
        }
      )
    }
  }
}
</script>
